<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.min (1).js"></script>
    <style>
          .container{
            display: flex;
            flex-wrap: wrap;
        }
        body{
            background-color: rgb(241, 240, 232);
            width: 1000px;
            height: 850px;
        }
        #duoyu{
            width: 1643px;
            height: 20px;
            border: solid 1px;
            margin-top: -10px;
            margin-left: -9px;
            background-color: rgb(60, 59, 59);
        }
        #one{
            width: 1639px;
            height: 50px;
            border: solid 3px;
            margin-top: 0px;
            margin-left: -9px;
            position: absolute;
            background-color: rgb(14, 13, 13);
        }
        a{
            color: aliceblue;
            width: 250px;
            height: 50px;
            margin-left: 200px;
            font-size: 25px;
            position: relative;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
        }
        span{
            width:250px;
            height: 50px;
            margin-left: 200px;
            color: black;
            font-size: 25px;
            position: relative;
            text-align: center;
            line-height: 50px;
            color: aliceblue;
            padding-left: -1px;
        
        }
        div{
            width: 1605px;
            height: 825px;
            border: double 20px;
            position: relative;
            margin-left: -4px;
            margin-top: 0px;
        }
        #two{
            background-image: url(img/5.jpg);
            background-repeat: no-repeat;
            background-size: 1605px 825px;
        }
        #three{
            background-image: url(img/6.jpg);
            background-repeat: no-repeat;
            background-size: 1605px 825px;
            display: none;
        }
        #four{
            background-image: url(img/7.jpg);
            background-repeat: no-repeat;
            background-size: 1605px 825px;
            display: none;
        }
        #five{
            background-image: url(img/16.jpg);
            background-repeat: no-repeat;
            background-size: 1605px 825px;
            display: none;
        }
    </style>

</head>
<body>
    <div id="duoyu"></div>
    <div id="one">
        <a href="js.7.18.html">首页</a>
        <span onclick="fun(1)">婴孩时期</span>
        <span onclick="fun(2)">幼年时期</span>
        <span onclick="fun(3)">少年时期</span>
        <span onclick="fun(4)">青年时期</span>
        <div id="two"></div>
        <div id="three"></div>
        <div id="four"></div>
        <div id="five"></div>
    </div>
    
</body>
<script>
function fun(i){
    let x,y,z,k;
    if(i==1){
        x="block";
        y="none";
        z="none";
        k="none";
    }
     if(i==2){
        x="none";
        y="block";
        z="none";
        k="none";
    }
    else if(i==3)  {
        x="none";
        y="none";
        z="block";
        k="none";
    }else if(i==4){
        x="none";
        y="none";
        z="none";
        k="block";
    }
    $("#two").css("display",x);
    $("#three").css("display",y);
    $("#four").css("display",z);
    $("#five").css("display",k);
}
</script>

</html>